<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-change="handleClick">
        <el-tab-pane label="基础设置" name="basic" />
        <el-tab-pane label="短信接口" name="sms" />
        <el-tab-pane label="APP消息推送" name="app" />
        <el-tab-pane label="系统参数" name="system" />
        <el-tab-pane label="程序员设置" name="code" />
        <el-tab-pane label="项目设置" name="project" />
      </el-tabs>
      <MyProTable
        ref="myProTableRef"
        :columns="columns"
        :requestApi="getListApi"
        :deleteApi="deleteApi"
        :deleteBatchApi="batchDeleteApi"
        otherHeight="55"
        :dataCallback="dataCallback"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" @click="setAddOrEditPage()">新增</el-button>
        </template>
        <!-- 表格操作 -->
        <template #action="{ row }">
          <el-button type="primary" link @click="setAddOrEditPage(row)">编辑</el-button>
        </template>
      </MyProTable>
    </el-card>
    <!-- 新增和编辑弹窗 -->
    <AddOrEdit ref="addOrEdit" @queryTable="resetList" />
  </div>
</template>
<script setup name="ParameterConfig">
import AddOrEdit from './components/addOrEdit.vue'
import { columns } from './constants'
import { getListApi, deleteApi, batchDeleteApi } from '@/api/system/param.js'

const activeName = ref('basic')
// tab栏切换
const handleClick = (tab) => {
  console.log(tab.props)
}

const myProTableRef = ref(null)

// 此处可以自定义表格返回值
const dataCallback = (result) => {
  result.rows = result.rows.map((item) => {
    item.status = `${item.status}`
    return item
  })
  return result
}
const resetList = () => {
  myProTableRef.value.reset()
}
// 编辑弹窗
const addOrEdit = ref()
const setAddOrEditPage = (params) => {
  addOrEdit.value.showDialog(params)
}
</script>
